<template>
  <div class="game">
    <canvas id="webgl"></canvas>
    <div id="index" @blur="indexShow = false"  tabindex="1" v-if="!Sweeper.settings.refreshBtn">
      <div>
        <svg class="icon" aria-hidden="true" @click="indexShow = !indexShow">
          <use xlink:href="#icon-faxian-29" />
        </svg>
      </div>
      <transition name="btnDown">
        <div class="btnDown" v-show="indexShow">
          <div class="btn" @click="$router.push({ path: '/' })">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuyeer-" />
            </svg>
          </div>
          <div class="btn" @click="handleRefresh">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shuaxin2" />
            </svg>
          </div>
        </div>
      </transition>
    </div>
    <div v-else id="index2">
      <div class="btnDown">
          <div class="btn" style="margin-bottom:4px" @click="$router.push({ path: '/' })">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuyeer-" />
            </svg>
          </div>
          <div class="btn" @click="handleRefresh">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shuaxin2" />
            </svg>
          </div>
        </div>
    </div>
    <div class="countNum">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-boon" />
      </svg>
      <div id="countNum" style="font-size: 24px; width: 60px">00</div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-oclock" />
      </svg>
      <div id="timeRunner" style="font-size: 20px; width: 100px">00</div>
    </div>
    <div class="relocation">
      <svg
        class="icon"
        aria-hidden="true"
        @click="Sweeper.handleBtn.refreshCamera()"
      >
        <use xlink:href="#icon-camera" />
      </svg>
    </div>
    <div class="btnRight" :style="'color:' + (hinddenFloor ? '#D00' : '#0DD')">
      <div class="btn_ground" @click="hinddenFloor = !hinddenFloor"></div>
      <svg
        class="icon floor_y"
        aria-hidden="true"
        :style="
          'transform: translate(-50%,0) ' +
          (hinddenFloor ? '' : 'rotate(180deg)') +
          ';'
        "
        @click="handleFloor('y')"
      >
        <use xlink:href="#icon-xia" />
      </svg>
      <svg
        class="icon floor_z"
        aria-hidden="true"
        :style="
          'transform: rotate(60deg) ' +
          (hinddenFloor ? '' : 'rotateX(180deg)') +
          ';'
        "
        @click="handleFloor('z')"
      >
        <use xlink:href="#icon-shang" />
      </svg>
      <svg
        class="icon floor_x"
        aria-hidden="true"
        :style="
          'transform: rotate(-60deg) ' +
          (hinddenFloor ? '' : ' rotateX(180deg)') +
          ';'
        "
        @click="handleFloor('x')"
      >
        <use xlink:href="#icon-shang" />
      </svg>
    </div>
    <div class="btnBox">
      <div
        class="btn_icon btnCtrl"
        v-show="flagOrDig"
        :class="Sweeper.handleFlag == 'dig' ? 'btn_on_select' : ''"
        @click="handleDigOrFlag('dig')"
      >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dig" />
        </svg>
      </div>
      <div
        class="btn_icon btnCtrl"
        v-show="!flagOrDig"
        :class="Sweeper.handleFlag == 'flag' ? 'btn_on_select' : ''"
        @click="handleDigOrFlag('flag')"
      >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-flag" />
        </svg>
      </div>
      <div
        class="btn_icon btnCtrl"
        :class="Sweeper.handleFlag == 'hide' ? 'btn_on_select' : ''"
        @click="Sweeper.handleFlag = 'hide'"
      >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-hind" />
        </svg>
      </div>
      <div
        id="magic"
        class="btn_icon btnCtrl"
        @click="Sweeper.handleBtn.btnHandleMagic()"
      >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-magic" />
        </svg>
      </div>
      <div
        id="hideBack"
        class="btn_icon btnCtrl"
        :style="
          Sweeper.hiddenList.length == 0
            ? 'backgroundColor:' + Sweeper.themeColor.color_bg1
            : ''
        "
        @click="Sweeper.handleBtn.hideBack()"
      >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-back" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import Sweeper from "@/assets/js/sweeper.js";
export default {
  name: "game",
  // components: { BtnLeftRight },
  data() {
    return {
      Sweeper: undefined,
      flagOrDig: true,
      // reverse: false, //是否反向
      hinddenFloor: true,
      indexShow: false,
      saveScore: false
    };
  },
  created() {
    this.Sweeper = new Sweeper(this);
  },
  mounted() {
    this.Sweeper.afterMounted();
  },
  destroyed() {
    this.Sweeper.dispose();
    this.Sweeper = null;
  },
  methods: {
    handleDigOrFlag(value) {
      if (this.Sweeper.handleFlag == value) {
        if(!this.Sweeper.settings.flagSchools){
          return
        }
        this.flagOrDig = !this.flagOrDig;
        this.Sweeper.handleFlag = value == "dig" ? "flag" : "dig";
      } else {
        this.Sweeper.handleFlag = value;
      }
    },
    handleFloor(direction) {
      if (this.hinddenFloor) {
        this.Sweeper.handleBtn.floorHidden(direction);
      } else {
        this.Sweeper.handleBtn.floorShow(direction);
      }
    },
    handleRefresh(){
      this.flagOrDig = true
      this.hinddenFloor = true,
      this.indexShow = false,
      this.Sweeper.refreshGame()
      this.$toast({message:'游戏重开',position:'bottom',duration:'500'})
    }
  },
};
</script>

<style lang="scss" scoped>
.game {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  canvas {
    height: 100%;
    widows: 100%;
  }
}
#index2{
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  
    .btn{
      border-radius: 5px;
      padding: 2px;
      border: white solid 2px;
      background: #fff5;
    }
}
#index {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff5;
  border: white solid 2px;
  border-radius: 5px;
  .btn {
    margin-top: 15px;
  }
  .btnDown{
    overflow: hidden;
  }
  .btnDown-enter-active,
  .btnDown-leave-active {
    transition: all .5s;
  }
  .btnDown-enter,
  .btnDown-leave-to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-30px);
  }
  .btnDown-enter-to,
  .btnDown-leave{
    opacity: 1;
    max-height: 150px;
  }
}
.countNum {
  position: fixed;
  right: 10px;
  top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  background-color: white;
  border: #aaa solid 2px;
  padding: 0 10px;
  border-radius: 10px;
}
.btnBox {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: flex;
  /* flex-flow: column; */
}

button {
  background: none;
  width: 64px;
  height: 64px;
  margin-top: 20px;
  margin-left: 20px;
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.btn_icon {
  padding: 5px;
  border-radius: 50%;
  border: #aaa solid 2px;
  background-color: white;
}
.btnCtrl {
  margin-left: 10px;
}
.btn_on_select {
  background-color: #5f5;
}
#menu_box {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #0005;

  visibility: hidden;
}
.menu {
  display: flex;
  padding: 20px;
  background: white;
  border: black solid 2px;
  border-radius: 15px;
  width: 150px;
  height: 80px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  align-items: center;
}
.menu_item {
  flex: 1;
  text-align: center;
  font-size: 20px;
}
.btnRight {
  position: fixed;
  width: 90px;
  height: 90px;
  right: 10px;
  bottom: 60px;
  flex-direction: column;
  .btn_ground {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fffa;
  }
  .icon {
    position: absolute;
  }
  .floor_z {
    left: 4px;
    bottom: 12px;
  }
  .floor_y {
    top: 0;
    left: 50%;
  }
  .floor_x {
    right: 4px;
    bottom: 12px;
    transform: rotate(-60deg);
  }
}
.relocation {
  position: fixed;
  top: 60px;
  right: 20px;
}
.taiji {
  position: fixed;
  left: 20px;
  bottom: 20px;
}
</style>